<template>
  <el-dialog
    v-model="approvalVisible"
    width="692px"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="dialog_tip">
      <img src="@/assets/images/dialog_success.png" alt="" />
      <p>资料已保存并提交，等待审核中</p>
      <span>预计审核将在48小时内完成，请在审核页面查看审核结果。</span>
      <el-button @click="handleSure">确认</el-button>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// interface Props {}
// const props = withDefaults(defineProps<Props>(), {})

const emit = defineEmits(['sure'])

const approvalVisible = ref(false)

const handleSure = () => {
  approvalVisible.value = false
  emit('sure')
}

defineExpose({
  approvalVisible,
})
</script>

<style lang="scss" scoped>
:deep(.el-dialog) {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 29px 0 51px !important;
  }
  .dialog_tip {
    text-align: center;
    img {
      width: 99px;
      height: 100px;
    }
    p {
      font-size: 24px;
      line-height: 35px;
      color: #383838;
      margin: 9px 0;
    }
    span {
      font-size: 16px;
      line-height: 24px;
      color: #a6a6a6;
      display: block;
    }
    .el-button {
      width: 77px;
      height: 39px;
      line-height: 39px;
      padding: 0;
      margin-top: 18px;
      border: 1px solid #a6a6a6;
      color: #a6a6a6;
      font-size: 20px;
      border-radius: 10px;
      &:hover {
        background: #2a82e4;
        color: #2a82e4;
      }
    }
    .el-button:hover,
    .el-button:focus {
      background: #2a82e4 !important;
      border-color: #2a82e4 !important;
      span {
        color: #fff !important;
      }
    }
  }
}
</style>
